<template>
	<div class="setting">
	  <template v-if="tabType == 'data'">
		<div class="card">
		  <div class="title">样式设置</div>
		  <div class="content">
			<el-form-item label="每行数量">
			  <el-radio-group v-model="settingData.data.col">
				<el-radio :label="3">3个</el-radio>
				<el-radio :label="4">4个</el-radio>
				<el-radio :label="5">5个</el-radio>
			  </el-radio-group>
			</el-form-item>
			<el-form-item label="块间隔" >
				<dc-slider :max="30" v-model="settingData.data.space"></dc-slider>
			</el-form-item>
			<el-form-item label="块圆角" >
				<dc-slider :max="100" v-model="settingData.data.radius"></dc-slider>
			</el-form-item>
			<el-form-item label="标题背景色1" >
				<dc-color-picker v-model="settingData.data.titleStyle.color1"/>
			</el-form-item>
			<el-form-item label="标题背景色2" >
				<dc-color-picker v-model="settingData.data.titleStyle.color2"/>
			</el-form-item>
			<dc-list
				v-model="settingData.data.titleArr"
				:leng="settingData.data.col"
				:itemProp="{
					title:{
						text: '标题',
						color: '#333',
					}
				}"
			>
				<template #title>标题设置</template>
				<template #listItem="{ element,index }">
					<el-form-item :label="`标题-${index + 1}`">
						<dc-text-color
							v-model="element.title"
							placeholder="请输入标题"
							maxlength="5"
							show-word-limit
						/>
					</el-form-item>
				</template>
			</dc-list>


		  </div>
		</div>
		<dc-list
		  v-model="settingData.data.list"
		  :itemProp="{
			src: '',
			title: {
			  text: '',
			  color: '#333',
			},
			isMp:0,
			mp:{
				path:'',
				appid:'',
				id:'',
			},
			url: '',
			color: '#fff',
		  }"
		>
		  <template #title>图标设置</template>
		  <template #listItem="{ element }">
			<el-form-item label="图标">
			  <div class="sa-flex">
				<sa-uploader v-model="element.src" fileType="image"/>
				<div class="tip">建议尺寸：44*44</div>
			  </div>
			</el-form-item>
			<el-form-item label="标题">
			  <dc-text-color
				v-model="element.title"
				placeholder="请输入标题"
				maxlength="5"
				show-word-limit
			  />
			</el-form-item>
			<template v-if="element.isMp ==1">
				<el-form-item label="小程序路径">
				<el-input
					v-model="element.mp.path"
					placeholder="请输入小程序路径"
				></el-input>
				</el-form-item>
				<el-form-item label="小程序appid">
				<el-input
					v-model="element.mp.appid"
					placeholder="请输入小程序appid"
				></el-input>
				</el-form-item>
				<el-form-item label="小程序原始ID">
				<el-input
					v-model="element.mp.id"
					placeholder="请输入小程序原始ID"
				></el-input>
				</el-form-item>
			</template>
			<el-form-item v-else label="链接">
				<dc-url v-model="element.url"></dc-url>
			</el-form-item>
			<el-form-item label="小程序">
				<el-switch v-model="element.isMp" :active-value="1" :inactive-value="0" />
			</el-form-item>
			<el-form-item label="背景色">
			  <dc-color-picker v-model="element.color"/>
			</el-form-item>
		  </template>
		</dc-list>
	  </template>
	</div>
  </template>
  
  <script setup>
	import dcColorPicker from '../../common/dc-color-picker.vue';
	import dcList from '../../common/dc-list.vue';
	import dcUrl from '../../common/dc-url.vue';
 	import dcSlider from '../../common/dc-slider.vue';
  	import dcTextColor from '../../common/dc-text-color.vue';
	import { cloneDeep } from 'lodash';
  	import  { watch } from "vue"
	const props = defineProps(['settingData', 'tabType']);

	  watch(()=>props.settingData.data.col ,(newCol)=>{
		if(newCol > 0){
			let oldArr = cloneDeep(props.settingData.data['titleArr'])
			if(oldArr.length > newCol){
				props.settingData.data['titleArr'] = oldArr.slice(0,newCol)
			}else{
				for(let i = oldArr.length; i < newCol; i++){
					props.settingData.data['titleArr'].push({
						title:{ text: '标题', color: '#333', }
					})
				}
			}
		}else{
			props.settingData.data['titleArr'] = []
		}
	  },{
		immediate: true
	  })
  </script>
  